Component({
  properties: {
    isShow: {
      type: Boolean,
      value: false
    },
    title: {
      type: String,
      value: ''
    },
    pause: {
      type: Number,
      value: 2000
    },
    duration: {
      type: Number,
      value: 250
    },
    shade: {
      type: Boolean,
      value: true
    },
    shadeClose: {
      type: Boolean,
      value: false
    },
    maxWidth: {
      type: Number,
      optionalTypes: [String],
      value: "80%"
    },
    maxHeight: {
      type: Number,
      optionalTypes: [String],
      value: "80%"
    },
    width: {
      type: Number,
      optionalTypes: [String],
      value: "80%"
    },
    zIndex: {
      type: Number,
      optionalTypes: [String],
      value: 100
    },
    height: {
      type: Number,
      optionalTypes: [String],
      value: ""
    },
    button: {
      type: Array,
      value: [
        { title: '取消', className: '',type:1},
        { title: '确认', className: '',type:2}
      ]
    },

  },
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  data: {
    W: 0,
    H: 0,
    styleString:"",
    isAniming:false,
    scrollH: 0
  },
  lifetimes: {
    attached: function () {
      console.log("attached")

    },
    moved: function () { 
      console.log("move")
    },
    detached: function () { 
      console.log("detached")
    },
  },
  created:function(){
    console.log("create");
  },
  ready: function () {
   console.log("ready")

  },

  observers: {
    'isShow': function () {
    //   console.log("xxxx")
     if(!this.data.isShow) return;
      var that=this;
      // 在 numberA 或者 numberB 被设置时，执行这个函数
      const query = this.createSelectorQuery();
      query.select('#J_coms-dialog').boundingClientRect();
      query.select('#J_dialog-btn').boundingClientRect();
      query.exec(function (res) {
        console.log(res);
        res.forEach(function (item,index,arr){
         if(index==0){
           that.setData({
             W: res[0].width,
             H: res[0].height,
             styleString: "margin-left:-" + res[0].width / 2 + "px;margin-top:-" + res[0].height / 2 + "px;width:" + res[0].width + "px;left:50%;top:50%;"
           });
         }else if(index==1){
           console.log("xxx")
           that.setData({
             styleString:that.data.styleString+"padding-bottom:"+item.height+"px"
           })
         }
         that.setData({
           isAniming:true
         })
        })
         
      })
     
    }
  },
  methods: {
    _isPercent: function (str) {
      return (typeof str == "string") ? ((str.indexOf("%") == -1) ? false : true) : false;
    },

    _getNumber: function (str) {
      return str.match(/\d+(\.\d{0,2})?/)[0]
    },
    switchChange:function(e){
      var data = e.currentTarget.dataset;
      if(data.type==1){
        this.onClose();
        this.triggerEvent('onClose')
      }else{
        this.triggerEvent('onConfirm')
      }
    },
    onClose:function(){
      this.setData({
        isShow:false
      })
    }
  }
  
})